<template>
	<view class="enter-container">
		<view class="enter-grid">
			<view class="enter-item" v-for="(item, index) in enterList" :key="index" @click="handleItemClick(item)">
				<view class="enter-icon">
					<image :src="item.iconUrl" mode="aspectFit" class="icon-img" />
				</view>
				<text class="enter-text">{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HomeEnter",
		data() {
			return {
				enterList: [{
						name: "优惠活动",
						iconUrl: "/static/images/menu5.png",
						path: "/pages/enter/activity" // 美食页面路由
					},
					{
						name: "正餐优选",
						iconUrl: "/static/images/menu9.png",
						path: "/pages/enter/dinner/dinnerList" // 正餐优选页面路由
					},
					{
						name: "美食盲盒",
						iconUrl: "/static/images/menu8.png",
						path: "/pages/enter/blindBoxes" // 美食盲盒页面路由
					},
					{
						name: "电影演出",
						iconUrl: "/static/images/menu12.png",
						path: "/pages/enter/movie/index" // 电影演出页面路由
					},
					{
						name: "我的订单",
						iconUrl: "/static/images/menu1.png",
						path: "/pages/enter/order/index" // 我的订单页面路由
					},
					{
						name: "我的收藏",
						iconUrl: "/static/images/menu2.png",
						path: "/pages/user/favorites" // 我的收藏页面路由
					},
					{
						name: "留言反馈",
						iconUrl: "/static/images/menu3.png",
						path: "/pages/enter/feedback" // 留言反馈页面路由
					},
					{
						name: "联系我们",
						iconUrl: "/static/images/menu4.png",
						path: "/pages/enter/contactUs" // 联系我们页面路由
					}
				]
			};
		},
		methods: {
			handleItemClick(item) {
				console.log("点击入口：", item.name);
				// 实现页面跳转
				uni.navigateTo({
					url: item.path, // 使用配置的路由路径
					fail: (err) => {
						console.error("跳转失败：", err);
						uni.showToast({
							title: "页面不存在",
							icon: "none"
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	/* 原有样式保持不变 */
	.enter-container {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.enter-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.enter-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		margin-bottom: 15rpx;
		padding: 10rpx 0;

		&:active {
			background-color: rgba(0, 0, 0, 0.03);
			border-radius: 15rpx;
		}
	}

	.enter-icon {
		width: 60rpx;
		height: 60rpx;
		background-color: #f5fafe;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}

	.icon-img {
		width: 60rpx;
		height: 60rpx;
	}

	.enter-text {
		font-size: 24rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 120rpx;
	}
</style>